<template>
  <j-modal
    :title="areaName"
    :width="1100"
    :visible="visible"
    switchFullscreen
    :footer="null"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <custom-table
      ref="table"
      rowKey="id"
      :showAlert="false"
      :showSelection="false"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
      @change="onTableChange"
    >
      <template slot="deviceName" slot-scope="text, record">
        <a-button type="link" @click="onDevice(record)">{{ text }}</a-button>
        <!-- <span style="cursor: pointer;" @click="onDevice(record)">{{ text }}</span> -->
      </template>
      <template slot="position" slot-scope="text, record">
        <a-button type="link" @click="onPosition(record)">{{ text }}</a-button>
        <!-- <span style="cursor: pointer;" @click="onPosition(record)">{{ text }}</span> -->
      </template>
      <template slot="status" slot-scope="text">
        <span v-if="text == 1">在线</span>
        <span style="color:red;" v-if="text == 2">离线</span>
      </template>
      <template slot="dpjk" slot-scope="text, record, index">
        <!-- {{ switchArr[index] }} -->
        <a-switch
          checked-children="开"
          un-checked-children="关"
          v-model="switchArr[index]"
          @change="onSwitchChange(record)"
        />
      </template>

      <template slot="action" slot-scope="text, record">
        <a-button
          type="link"
          style="padding:0;"
          :disabled="record.sortNum > 0"
          @click="onSort(record, 1)"
        >置顶</a-button
        >
        <a-divider type="vertical" />
        <a-button
          type="link"
          style="padding:0;"
          :disabled="record.sortNum == 0"
          @click="onSort(record, 2)"
        >取消置顶</a-button
        >
      </template>
    </custom-table>
    <PositionModal ref="positionModalId" />
  </j-modal>
</template>

<script>
import * as api from '@/api/xlgc/videoManage.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
import PositionModal from './positionModal'
export default {
  name: 'DisposeModal',
  components: {
    CustomTable,
    PositionModal
  },
  props: {
    id: {
      type: [String, Number]
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'deviceName' }
        },
        {
          title: '位置',
          dataIndex: 'position',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'position' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '大屏监控',
          dataIndex: 'dpjk',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'dpjk' }
        },
        {
          title: '排序',
          width: 80,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {},
      areaName: '',
      switchArr: [],
      row: {}
    }
  },
  computed: {},
  methods: {
    show(record) {
      this.areaName = record.areaName
      this.pageFilter.sysAreaId = record.areaId
      this.visible = true
      this.refreshTable() // 获取摄像头
    },
    async refreshTable() {
      this.loading = true
      let res = await api.deviceList(this.pageFilter)
      if (res.success) {
        this.loading = false
        this.pageData = res.result
        this.switchArr = []
        this.pageData.records.forEach(item => {
          if (item.needShow == 1) {
            this.switchArr.push(true)
          } else {
            this.switchArr.push(false)
          }
        })
      }
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    onDevice(record) {
      console.log('11111')
      this.$router.push({
        path: '/videoManage/videoList',
        query: {
          id: record.id
        }
      })
    },
    onPosition(record) {
      this.$refs.positionModalId.show(record)
    },
    async onSort(record, status) {
      this.loading = true
      let res = await api.deviceTop({ id: record.id, type: status })
      if (res.success) {
        this.refreshTable()
      } else {
        this.loading = false
      }
    },
    async onSwitchChange(record) {
      let typeValue = record.needShow == 1 ? 2 : 1
      this.loading = true
      let res = await api.deviceShow({ id: record.id, type: typeValue })
      if (res.success) {
        this.refreshTable()
      } else {
        this.loading = false
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<style lang="less" scoped></style>
